<template>
  <div style="padding-top: 20px">

    <!--    default-checked-keys : 默认选中的节点-->
    <el-tree
      :data="menuList"
      show-checkbox
      node-key="id"
      ref="tree"
      :default-expand-all="true"
      :default-checked-keys="menus"
      :props="defaultProps">
    </el-tree>
    <div slot="footer" class="dialog-footer" style="padding-top: 30px">
      <el-button @click="go_back">返回</el-button>
      <el-button type="primary" @click.native="editSubmit" :loading="addLoading">提交</el-button>
    </div>
  </div>
</template>
<script>
    //导入cmsApi中的所有接口
    import * as userApi from '../api/user'

    export default {
        data() {
            return {
                roleId: '',
                addLoading: false,//加载效果标记
                //角色
                menus: [],//拥有的权限
                menuList: [{
                    id: 1,
                    label: '一级 1',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1'
                        }, {
                            id: 10,
                            label: '三级 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1'
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        methods: {
            //返回主页面调用的方法
            go_back() {
                //设置路由
                this.$router.push({
                    path: '/system/role/list',
                    //设置路由携带的参数为当前路由中的参数
                    query: {
                        page: this.$route.query.page,
                    }
                })
            },
            //提交角色拥有的权限
            editSubmit() {
                //获取树选中的节点
                let arr = this.$refs.tree.getCheckedKeys();
                let params=arr.join(",");
                this.$confirm('确认授权吗？', '提示', {}).then(() => {
                    this.addLoading = true;
                    userApi.role_setMenu(this.roleId,params).then((res) => {
                        console.log(res);
                        if (res.success) {
                            this.addLoading = false;
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            //返回主页面
                            this.go_back();
                        } else {
                            this.addLoading = false;
                            this.$message.error('提交失败');
                        }
                    });
                });
            },
        },
        //钩子方法，页面创建渲染之前调用
        created: function () {
            //从url中获取roleId,params指的是从url中获取指定参数
            this.roleId = this.$route.params.roleId;
            //查询权限列表
            userApi.getMenuList().then((res) => {
                console.log(res);
                if (res) {
                    this.menuList = res.children;
                }
            });
            let selNodesIds = [];
            //查询角色拥有的权限
            userApi.user_getRoleMenu(this.roleId).then((res) => {
                if (res.length > 0) {
                    res.forEach(item => {
                        selNodesIds.push({id: item});
                    });
                    console.log(selNodesIds);
                    //延时设置选中的节点
                    setTimeout(()=>{
                       this.$refs.tree.setCheckedNodes(selNodesIds);
                    });
                }
            });

        },
        //钩子方法，在页面渲染之后调用
        mounted: function () {

        }
    }
</script>
<style>

</style>
